<template>
  <div class="container">
    <el-card class="box-card">
      <div>
        <span>{{ title }}</span>
        <el-divider></el-divider>
      </div>

      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <!-- 学科 -->
        <el-form-item label="学科" prop="subjectID">
          <el-select
            v-model="form.subjectID"
            placeholder="请选择"
            @change="getGirectorys(form.subjectID)"
          >
            <el-option
              v-for="(item, index) in Subjects"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- 目录 -->
        <el-form-item label="目录" prop="catalogID">
          <el-select v-model="form.catalogID" placeholder="请选择">
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in catalogIdList"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- 企业 -->
        <el-form-item label="企业" prop="enterpriseID">
          <el-select v-model="form.enterpriseID" placeholder="请选择">
            <el-option
              :label="item.company"
              :value="item.id"
              v-for="item in companysList"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- 地区----------------------------------------------------------------- -->
        <el-form-item label="城市" required prop="city">
          <!-- 选择城市 -->

              <el-select
                class="diqu"
                v-model="form.province"
                placeholder="请选择"
                @change="city"
              >
                <el-option
                  v-for="(item, index) in provinces"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>

          <!-- 区县 -->

              <el-select
                class="diqu"
                v-model="form.city"
                style="margin-left: 20px"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in citys"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>

        </el-form-item>
        <!-- ------------------------------------------------------------------------------------ -->

        <!-- 方向 -->
        <el-form-item label="方向" prop="direction">
          <el-select v-model="form.direction" placeholder="请选择">
            <el-option
              :label="item"
              :value="item"
              v-for="(item, index) in directionList"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- 题型 -->
        <el-form-item label="题型">
          <el-radio-group v-model="form.questionType">
            <el-radio label="1" @change="danxuan">单选</el-radio>
            <el-radio label="2" @change="duoxuan">多选</el-radio>
            <el-radio label="3" @change="jianda">简答</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 难度 -->
        <el-form-item label="难度">
          <el-radio-group v-model="form.difficulty">
            <el-radio label="1">简单</el-radio>
            <el-radio label="2">一般</el-radio>
            <el-radio label="3">困难</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 题干 富文本 -->
        <el-form-item label="题干" prop="question">
          <editor
            class="edit"
            :question="form.question"
            @changeQuestion="changeQuestion"
          ></editor>
        </el-form-item>

        <!-- 选项 -->
        <el-form-item label="选项" v-if="isJianda">
          <xuanzekuang
            ref="xuanzekuang"
            @emitOption="changeOptions"
            :isDisabled="isDisabled"
            :isdanxuan="isdanxuan"
            :oPtions="form.options"
          ></xuanzekuang>
        </el-form-item>

        <!-- 视频解析  -->
        <el-form-item label="视频解析">
          <el-input placeholder="请输入内容" v-model="form.videoURL"></el-input>
        </el-form-item>

        <!-- 答案解析 -->
        <el-form-item label="答案解析" prop="answer">
          <editor
            class="edit"
            :answer="form.answer"
            @changeAnswer="changeAnswer"
          ></editor>
        </el-form-item>

        <!-- 题目备注 -->
        <el-form-item label="题目备注">
          <el-input
            type="textarea"
            v-model="form.remarks"
            class="text"
          ></el-input>
        </el-form-item>

        <!-- 试题标签 -->
        <el-form-item label="试题标签">
          <el-select
            @change="clickTag(tagss)"
            v-model="tagss"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请选择标签"
          >
            <el-option
              v-for="item in tagsList"
              :key="item.value"
              :label="item.tagName"
              :value="item.tagName"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <!-- 确认提交 -->
        <el-form-item>
          <el-button type="primary" @click="onSubmit" v-if="isSubmit"
            >确认提交</el-button
          >
          <el-button type="success" v-else @click="onSubmit"
            >确认修改</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { simple as getSubjects } from '@/api/hmmm/subjects' // 简单学科列表
import { simple as getGirectorys } from '@/api/hmmm/directorys' // 简单目录列表
import { list as getCompanysList } from '@/api/hmmm/companys' // 企业列表
import { direction } from '@/api/hmmm/constants' // 企业列表
import {
  add as luru,
  detail as editQuestion,
  update as editApi
} from '@/api/hmmm/questions' // 企业列表
import { list as getTagsList } from '@/api/hmmm/tags' // 企业列表
import Editor from '@/zujian/quillEditor'
// import upload from '@/zujian/upload'
import xuanzekuang from '@/zujian/xuanzekuang' // 引入单选那个组件
import { provinces, citys } from '@/api/hmmm/citys'

export default {
  name: 'questionsNew',
  // 注册组件
  components: {
    Editor,
    xuanzekuang
    // upload
  },

  data () {
    // 验证题干是否有值
    const questionVal = (rules, value, callback) => {
      // 如果无值
      if (!this.form.question) return callback(new Error('请输入上方题干'))
      else if (this.form.question && !this.form.answer) {
        callback(new Error('请输入答案解析'))
      } else {
        callback()
      }
    }
    // 验证城市部分
    const area = (rules, value, callback) => {
      // 如两个都无值  城市不提示文字信息

      if (!this.form.province && !this.form.city) {
        return callback(new Error('请选择地区'))
      } else if (this.form.province && !this.form.city) {
        callback(new Error('请选择地区'))
      } callback()
    }
    return {
      form: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业简称
        province: '', // 省份
        city: '', // 城市
        direction: '', // 方向
        questionType: '1', // 题型
        difficulty: '1', // 难度
        tags: '', // 试题标签
        question: '', // 题干
        answer: '', // 答案解析
        options: [
          { isRight: false, code: 'A', title: '', img: '' },
          { isRight: false, code: 'B', title: '', img: '' },
          { isRight: false, code: 'C', title: '', img: '' },
          { isRight: false, code: 'D', title: '', img: '' }
        ], // 子组件传来的关于单选多选的数据
        videoURL: '', // 视频解析
        remarks: '' // 题目备注,422的话先删除这个
      },
      rules: {
        subjectID: [
          { required: true, message: '请选择学科', trigger: 'change' }
        ],
        question: [
          { required: true, message: '请输入题干', trigger: 'change' }
        ],
        catalogID: [
          { required: true, message: '请选择目录', trigger: 'change' }
        ],
        enterpriseID: [
          {
            required: true,
            message: '请选择企业',
            trigger: 'change'
          }
        ],

        city: [
          { validator: area, trigger: 'blur' },
          {
            required: true,
            message: '请选择地区',
            trigger: 'change'
          }
        ],

        direction: [
          { required: true, message: '请选择方向', trigger: 'change' }
        ],
        answer: [
          { validator: questionVal, trigger: 'blur' },
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      },
      tagss: '', // 临时储存tags
      isSubmit: true, // 是否是点击修改过来的通过
      tagsList: [], // 试题标签列表
      isdanxuan: true, // 是否是单选
      provinces: provinces(), // 省份列表
      citys: [], // 城市列表
      Subjects: [], // 学科列表
      catalogIdList: [], // 目录列表
      companysList: [], // 企业列表
      directionList: [], // 方向列表
      radio: '1', // 选项里的单选框的值
      isDisabled: true, // 是否禁用增加选项与答案的按钮
      input: '', // 选项输入框绑定的值
      isJianda: true, // 是否是简答题 因为点击简答才会让单选框隐藏所以开始是true
      i: 68, // 做添加按钮ABCD枚举用 ASCII码对应的D是68
      ii: 4, // 做addFn里的数组对象的key
      zm: '', // addFn方法里传到数组里的字母
      routeId: [], // 路由传来的值
      title: '试题录入' // 标题名称
    }
  },

  async created () {
    await this.openTheDoor() // 调用进入页面的方法，里面判断了是如何打开页面的
    this.choiceChange() // 数据回填用，判断是多选单选的
  },

  methods: {
    // 单选多选那里的变化,数据回填使
    choiceChange () {
      if (this.form.questionType === '1') {
        this.isDisabled = true
        this.isJianda = true
        this.isdanxuan = true
      } else if (this.form.questionType === '2') {
        this.isDisabled = false
        this.isJianda = true
        this.isdanxuan = false
      } else {
        this.isJianda = false
      }
    },

    // 获取基础题库||精选题库传来的ID，并且给按钮改样式,渲染页面
    async openTheDoor () {
      this.routeId = this.$route.query.id
      //   console.log(this.routeId)
      // 如果有routeId说明是从别的页面点击修改过来的，调用接口，获取数据渲染页面更改按钮样式
      if (this.routeId) {
        const data = {
          id: ''
        }
        this.title = '试题修改'
        data.id = this.routeId
        // 更改按钮样式
        this.isSubmit = false
        // 调用获取数据的接口
        const res = await editQuestion(data)
        // console.log(res)
        this.form = res.data // 把得到的值赋给this.form
        // console.log(res.data)
        // console.log(this.form.options)

        // 调用子组件的方法

        this.$refs.xuanzekuang.choice(res.data)
        this.getSubjects() // 获取学科列表
        this.getCompanysList() // 获取企业列表
        this.direction() // 获取方向列表
        this.getGirectorys(this.form.subjectID) // 让目录能渲染出来
        this.tagss = res.data.tags
        if (this.tagss) {
          this.tagss = this.tagss.split(',')
        }
      } else {
        // 否则的话说明是直接打开的本页面
        this.getSubjects() // 获取学科列表
        this.getCompanysList() // 获取企业列表
        this.direction() // 获取方向列表
      }
    },

    // 接收子组件传来的值 option
    changeOptions (data) {
      this.form.options = data
    },

    // 获取学科列表
    async getSubjects () {
      const res = await getSubjects() // 调用获取学科列表的接口
      // console.log(res)
      this.Subjects = res.data
    },

    // 获取目录列表
    async getGirectorys (data) {
      const res = await getGirectorys({ subjectID: data })
      this.catalogIdList = res.data
      // 判断 如果学科里没有数据，就让目录列表清空
      if (res.data.length === 0) {
        this.form.catalogID = ''
      }

      // 获取标签列表
      const resa = await getTagsList({ subjectID: data })
      this.tagsList = resa.data.items
    },

    // 获取企业列表
    async getCompanysList () {
      const res = await getCompanysList()
      this.companysList = res.data.items
    },

    // 选择完省份后把省份赋值给区县城市
    city () {
      this.citys = citys(this.form.province)
      this.form.city = ''
    },

    // 获取方向列表
    direction () {
      this.directionList = direction
    },

    // 点击最底下的提交按钮
    onSubmit () {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return
        // 有routeId证明是编辑修改
        if (this.routeId) {
          // 如果识别的页面进来的，此时是编辑修改模式
          // 向form大对象里添加id字段并赋值
          this.form.id = +this.routeId
          // 调用修改的接口
          // 处理数组格式
          this.form.options.forEach((item) => {
            if (item.isRight === 1 || item.isRight === true) {
              item.isRight = true
            } else {
              item.isRight = false
            }
          })
          if (this.form.questionType === '3') {
            this.form.options = [
              { isRight: false, code: 'A', title: '', img: '' },
              { isRight: false, code: 'B', title: '', img: '' },
              { isRight: false, code: 'C', title: '', img: '' },
              { isRight: false, code: 'D', title: '', img: '' }
            ]
          }
          //   console.log(this.form)
          this.form.tags = String(this.form.tags)
          await editApi(this.form)
          this.$message.success(
            '妈的可算成了，测试的朋友注意，代码敲的再好也不要忘记咱们的中华文化，晋太元中武陵人捕鱼为业。缘溪行，忘路之远近。忽逢桃花林，夹岸数百步，中无杂树，芳草鲜美，落英缤纷。渔人甚异之，复前行，欲穷其林。林尽水源，便得一山，山有小口，仿佛若有光。便舍船，从口入。初极狭，才通人。复行数十步，豁然开朗。土地平旷，屋舍俨然，有良田、美池、桑竹之属。阡陌交通，鸡犬相闻。其中往来种作，男女衣着，悉如外人。黄发垂髫，并怡然自乐。'
          )
          this.$router.back() // 返回来的界面
        } else {
          // 否则是题目录入
          // 如果题目类型为3也就是简答题的话
          if (this.form.questionType === '3') {
            this.form.options = [
              { isRight: false, code: 'A', title: '', img: '' },
              { isRight: false, code: 'B', title: '', img: '' },
              { isRight: false, code: 'C', title: '', img: '' },
              { isRight: false, code: 'D', title: '', img: '' }
            ]
          }
          if (this.form.tags) {
            // 标签时数组，为了格式要求转成字符串
            // console.log(this.form.tags)
            this.form.tags = String(this.form.tags)
          }
          // 调用提交接口
          await luru(this.form)
          this.$message.success(
            '妈的可算成了，先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益然后就是图片功能暂未更新没有，目前这个只能点着玩了，妈的可算成了，测试的朋友注意，代码敲的再好也不要忘记咱们的中华文化北冥有鱼，其名为鲲。鲲之大，不知其几千里也；化而为鸟，其名为鹏。鹏之背，不知其几千里也；怒而飞，其翼若垂天之云。'
          )
          this.$router.push('/questions/list')
        }
      })
    },

    // 点击单选按钮
    danxuan () {
      this.isDisabled = true
      this.isJianda = true
      this.isdanxuan = true
      // 让所有isRigth变为false
      this.form.options.forEach((item) => {
        item.isRight = false
      })
    },

    // 点击多选按钮
    duoxuan () {
      this.isDisabled = false
      this.isJianda = true
      this.isdanxuan = false
      // 让所有isRigth变为false
      this.form.options.forEach((item) => {
        item.isRight = false
      })
    },

    // 点击简答按钮
    jianda () {
      this.isJianda = false
    },

    // 题干富文本的值变更
    changeQuestion (data) {
      this.form.question = data
    },

    // 解析内容变更
    changeAnswer (data) {
      this.form.answer = data
    },

    // 标签部分
    clickTag (tag) {
      this.form.tags = tag
      //   console.log(this.form.tags)
    }
  }
}
</script>

<style scoped >

.el-radio-group {
    font-size: 0;
    width: 500px;
}

.el-select {
  width: 430px;
}
.diqu {
  width: 210px;
  margin-right: -10px;
}
.edit {
  height: 200px;
  width: 900px;
}
.box-card {
  margin: 20px 20px 30px 20px;
}
.el-radio{
  display: inline-block;
}
.ipt {
  width: 200px;
  margin: 0 20px;
}
.el-input {
  width: 430px;
}
.text {
  width: 430px;
}
</style>
